import { Button, Card, Form, Input } from 'antd';
import './login.scss';
import { ILoginParams } from './login.type';

const onFinish = (values: ILoginParams) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

type FieldType = {
  username?: string;
  password?: string;
};

export default function Login () {
  return (
    <div id="login">
      <Card style={{ width: 500 }}>
        <h2 className="title">backstage management</h2>
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
            <div className="login-submit">
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
};